<template>
	<view class="content">
		<view class="picbox">
			<view class="pic-item" @click="selectTab(0)">
				<view class="pic-item-box"
					:style="{background: cur == 1?'linear-gradient(133deg, #FF8679 -5%, #FB4A43 106%);':' #D8D8D8;',color:cur ==1?'#FB4A43':'#999999'}">
					<image :src="$BASE_URL +picList[7]" mode="aspectFill" v-if="cur == 1"></image>
					<image :src="$BASE_URL +picList[3]" mode="aspectFill" v-else></image>
				</view>
				<view class="" :style="{color:cur == 1?'#FB4A43':'#999999'}">
					订单问题
				</view>
			</view>
			<view class="pic-item" @click="selectTab(1)">
				<view class="pic-item-box"
					:style="{background: cur == 2?'linear-gradient(133deg, #FF8679 -5%, #FB4A43 106%);':' #D8D8D8;'}">
					<image :src="$BASE_URL +picList[4]" mode="aspectFill" v-if="cur == 2"></image>
					<image :src="$BASE_URL +picList[0]" mode="aspectFill" v-else></image>
				</view>
				<view class="" :style="{color:cur == 2?'#FB4A43':'#999999'}">
					支付问题
				</view>
			</view>
			<view class="pic-item" @click="selectTab(2)">
				<view class="pic-item-box"
					:style="{background: cur == 3?'linear-gradient(133deg, #FF8679 -5%, #FB4A43 106%);':' #D8D8D8;',color:cur == 3?'#FB4A43':'#999999'}">
					<image :src="$BASE_URL +picList[5]" mode="aspectFill" v-if="cur == 3"></image>
					<image :src="$BASE_URL +picList[1]" mode="aspectFill" v-else></image>
				</view>
				<view class="" :style="{color:cur == 3?'#FB4A43':'#999999'}">
					发货问题
				</view>
			</view>
			<view class="pic-item" @click="selectTab(3)">
				<view class="pic-item-box"
					:style="{background: cur == 4?'linear-gradient(133deg, #FF8679 -5%, #FB4A43 106%);':' #D8D8D8;',color:cur == 4?'#FB4A43':'#999999'}">
					<image :src="$BASE_URL +picList[6]" mode="aspectFill" v-if="cur == 4"></image>
					<image :src="$BASE_URL +picList[2]" mode="aspectFill" v-else></image>
				</view>
				<view class="" :style="{color:cur == 4?'#FB4A43':'#999999'}">
					售后问题
				</view>
			</view>

		</view>




		<view class="collapsebox">

			<view class="" style="font-size: 36rpx;font-weight: 700;color: #3D3D3D;">
				{{title}}
			</view>


			<u-collapse>
				<u-collapse-item :title="item.head" v-for="(item, index) in list" :key="index">

					<template slot="title-all">
						<view class="title-all">
							<view>{{item.head}}</view>
							<view class="">
								<image :src="$BASE_URL + picList2[7]" mode="aspectFill"
									style="height: 10rpx;width: 20rpx;" v-if="item.change">
									<image :src="$BASE_URL + picList2[6]" mode="aspectFill"
										style="height: 10rpx;width: 20rpx;" v-if="!item.change">
							</view>
						</view>
					</template>
					<view class="" v-html="item.body">

					</view>
				</u-collapse-item>
			</u-collapse>
		</view>
	</view>
</template>

<script>
	import parse from 'mini-html-parser2'
	export default {
		data() {
			return {
				title: '支付问题',
				picList: [],
				picList2: [],
				cur: 1,
				dlist: {},

				list: []
			}
		},
		onLoad(e) {
			console.log(e);
			this.cur = parseInt(e.index) + 1
		switch (this.cur) {
			case 1:
				this.title = '订单问题'
				break;
			case 2:
				this.title = '支付问题'
				break;
			case 3:
				this.title = '发货问题'
				break;
			case 4:
				this.title = '售后问题'
				break;
			default:
				break;
		}
			this.getpic()
			this.getList()
		},
		methods: {
			getList() {
				this.$http('other.getHelp', {
					type: this.cur
				}).then(res => {
					this.list = []
					let list = res.data.list
					list.forEach(item => {
						// console.log(item);
						let v = ''
						parse(item.content, (err, htmlData) => {
							if (!err) {
								v = htmlData
							}
						})
						this.list.push({
							head: item.name,
							body: v,
							open: false
						})
					})

				})

			},

			open(e) {
				// console.log('open', e)
			},
			close(e) {
				// console.log('close', e)
			},
			change(e) {
				// console.log('change', e)
			},
			selectTab(index) {
				// 选择tabs
				this.cur = index + 1


				switch (this.cur) {
					case 1:
						this.title = '订单问题'
						break;
					case 2:
						this.title = '支付问题'
						break;
					case 3:
						this.title = '发货问题'
						break;
					case 4:
						this.title = '售后问题'
						break;
					default:
						break;
				}
				this.getList()
			},

			getpic() {
				this.$http('common.getPic', {}).then(res => {
					if (res.code === 1) {
						// console.log(res);

						this.picList = res.data.result.helpicon
						this.picList2 = res.data.result.selectIcon
						// console.log(res.data.result.dd1);
						this.dlist = res.data.result.dd1
						// 	for(var i in this.dlist){

						// 	  this.dlist[i] = this.dlist[i].split(',')
						// 	}
						// console.log(this.dlist);

					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		padding-top: 30rpx;
		box-sizing: border-box;
	}

	.picbox {
		width: 690rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;

		.pic-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.pic-item-box {
				width: 80rpx;
				height: 80rpx;
				border-radius: 40rpx;
				background: #D8D8D8;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 20rpx;

				image {
					width: 40rpx;
					height: 40rpx;
				}

			}

		}
	}




	.collapsebox {

		width: 700rpx;
		padding: 30rpx;
		margin: 0 auto;
		box-sizing: border-box;
		border-radius: 20rpx;
		margin-top: 30rpx;
		background-color: #fff;


		.title-all {
			width: 630rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
</style>
